<template>
  <div class="add-form">
    <el-dialog :title="type ? '添加' : '编辑' + '权限组'" @close="onClose" :visible="dialogFormVisible">
      <el-form
        ref="dataForm"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left:120px;"
      >
        <el-form-item :label="$t('table.username')" prop="title">
          <el-input v-model="formBase.title" ></el-input>
        </el-form-item>
        <el-form-item :label="$t('table.powerDistriB')">
          <el-tree
            :data="treeData"
            show-checkbox
            :default-expanded-keys="[0]"
            :default-checked-keys="formBase.permissions"
            node-key="id"
            ref="tree"
            highlight-current
            :props="Props">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="onSave">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '../../api/base/menus'
import { add, detail, update } from '../../api/base/permissions'
let _this = []
export default {
  name: 'permissionAddData',
  props: {
    dialogFormVisible: {
      type: Boolean,
      required: true
    },
    type: {
      type: Number
    }
  },
  computed: {
    treeData () {
      function createNode (item) {
        // 复选框选择
        let checked = false
        let selected = false
        if (_this !== null && _this.formBase.permissions.length > 0) {
          const per = _this.formBase.permissions.find(function (value, index) {
            return value === item.id
          })
          selected = !!per
        }
        // 标记勾选
        if (selected) {
          const isPoint = item.childs === undefined && item.points === undefined
          const hasChilds = item.childs !== undefined && item.childs.length > 0
          const hasPoints = item.points !== undefined && item.points.length > 0
          if (isPoint) {
            checked = true
          } else if (hasPoints) {
            checked = false
          } else if (hasChilds) {
            checked = false
          } else {
            checked = true
          }
        }
        return {
          id: item.id === undefined ? 0 : item.id,
          title: item.title,
          children: [],
          selected: selected,
          checked: checked
        }
      }
      function parseNodes (nodes, parentNode) {
        for (const it of nodes) {
          const node = createNode(it)
          // 标记选中
          // console.log(node.checked)
          if (node.checked) {
            parentNode.selected = true
          }
          if (it.childs !== undefined && it.childs.length > 0) {
            parseNodes(it.childs, node)
          } else if (it.points !== undefined && it.points.length > 0) {
            parseNodes(it.points, node)
          }
          parentNode.children.push(node)
        }
      }
      const nodes = createNode({ title: '系统菜单和页面权限点', expand: true })
      parseNodes(this.menusList, nodes)
      return [nodes]
    }
  },
  data () {
    return {
      menusList: [],
      Props: {
        label: 'title'
      },
      formBase: {
        id: 0,
        create_date: '',
        title: '',
        permissions: []
      }
    }
  },
  created () {
    _this = this
    this.getMenus()
  },
  methods: {
    async getMenus () {
      const res = await list()
      this.menusList = res.data
    },
    onClose () {
      this.$refs.dataForm.resetFields()
      this.$emit('update:dialogFormVisible', false)
      this.formBase.permissions = []
      this.formBase.title = ''
    },
    async onSave () {
      this.formBase.permissions = this.$refs.tree.getCheckedKeys()
      if (this.type) {
        await add(this.formBase)
        this.$message.success('添加成功')
        this.formBase.title = ''
      } else {
        await update(this.formBase)
      }
      this.onClose()
      this.$emit('updatePermission')
    },
    async setPermissionList (row) {
      const res = await detail(row)
      this.formBase.title = res.data.title
      this.formBase.permissions = res.data.permissions
      this.formBase.id = res.data.id
    }
  }
}
</script>

<style scoped lang="less">
.el-tree {
  margin-top: 8px;
}
.el-tree-node__content {
  height: auto;
}
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-dialog__footer {
  text-align: right;
}
</style>
